<template>
  <div class="div">
    <div class="div1">
      <que :queList="queList" :butFlag="butFlag" :rules="rules" :items="items" :options="opti" @add="add"
           @query="query" :querys="querys" :addForm="addForm"/>
    </div>
    <Tables :items="items" :list="list" :loading="loading" :rules="rules" :high="high"
            :options="opti" @show="show" :editForm="editForm" @update1="update" :resetback="butFlag"
            @resetword="resetword" @update="update"/>
    <el-col :md="{span: 5, offset: 6}" :lg="{span: 4, offset: 10}">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="pagesize"
        :current-page="page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-col>
  </div>
</template>
<script>
  import Tables from '../components/Tables.vue'
  import axios from 'axios'
  import Que from '../components/Que.vue'
  import moment from 'moment'
  import {mapState} from 'vuex'
  export default{
    name: 'User',
    components: {
      Que,
      Tables
    },
    data () {
      return {
        list: [],
        high: 0,
        loading: false,
        butFlag: true,
        items: [
          {
            prop: 'account',
            label: '账号',
            add: true,
            table: true,
            edit: true,
            disabled: true
          },
          {
            prop: 'email',
            label: '邮箱',
            add: true,
            table: true,
            edit: true
          },
          {
            prop: 'name',
            label: '名字',
            add: true,
            table: true,
            edit: true
          },
          {
            prop: 'job',
            label: '部门',
            add: true,
            table: true,
            edit: true
          },
          {
            prop: 'roleId',
            label: '用户权限',
            add: true,
            table: false,
            options: [],
            op: '0',
            edit: true
          },
          {
            prop: 'createDate',
            label: '创建日期',
            meth: function (row, column) {
              var date = row[column.property]
              if (date === null) {
                return date
              } else {
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
              }
            },
//            width: '200',
            table: true,
            add: false
          },
          {
            prop: 'state',
            label: '状态',
            add: false,
            table: true,
            sty: '0'
          }
        ],
        rules: {
          name: [
            {required: true, message: '请输入名字', trigger: 'blur'},
            {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱地址', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
          ],
//          job: [
//            {required: true, message: '请输入职位', trigger: 'change'}
//          ],
          account: [
            {required: true, message: '请输入登录账户', trigger: 'change'},
            {min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur'}
          ],
          roleId: [
            {type: 'array', required: true, message: '请选择权限', trigger: 'change'}
          ]
        },
        queList: [
          {
            width: '3',
            name: '用户账号',
            prop: 'acc',
            i1: '0'
          },
          {
            width: '3',
            name: '姓名',
            prop: 'name',
            i1: '0'
          }],
        page: 1,
        pagesize: 20,
        total: 0,
        opti: [],
        editForm: {
          roleId: [],
          name: '',
          account: '',
          email: '',
          job: ''
        },
        addForms: false,
        acc: '',
        name: '',
        querys: {
          acc: '',
          name: ''
        },
        addForm: {
          roleId: [],
          name: '',
          account: '',
          email: '',
          job: ''
        }
      }
    },
    computed: {
      ...mapState({
        isLogin: state => state.eui.isLogin,
        username: state => state.eui.username
      })
    },
    created () {
      if (!sessionStorage.getItem('username')) {
        this.$router.replace('/')
      }
    },
    mounted () {
      this.get()
      axios({
        method: 'get',
        url: `${this.BASE_URL}/roles/getAll`,
        responseType: 'json',
        params: {
          page: this.page,
          pagesize: this.pagesize
        }
      }).then((response) => {
        var list = []
        response.data.data.forEach((item) => {
          const map = new Map()
          map.set('label', item.name)
          map.set('value', item.roleId)
          map.set('description', item.description)
          list.push(map)
        })
        this.opti = list
      }).catch(() => {
        this.loading = false
      })
      this.high = window.innerHeight - 200
    },
    methods: {
      handleCurrentChange (val) {
        this.page = val
        this.get()
      },
      handleSizeChange (val) {
        this.pagesize = val
        this.get()
      },
      add (msg) {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/manager/add`,
          responseType: 'json',
          params: {
            page: 1,
            pagesize: 20,
            account: msg.account,
            name: msg.name,
            email: msg.email,
            job: msg.job,
            rolesId: msg.roleId.toString()
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.addForms = false
            this.loading = false
            this.$message('已创建')
            this.total = response.data.total
            this.list = response.data.data
          } else {
            this.loading = false
            this.$message.error('该账户已存在')
          }
        }).catch(() => {
          this.loading = false
        })
      },
      show (msg) {
        this.editForm.roleId = msg.roleId
        this.editForm.name = msg.name
        this.editForm.account = msg.account
        this.editForm.job = msg.job
        this.editForm.email = msg.email
      },
      update (msg) {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/manager/sa`,
          responseType: 'json',
          params: {
            account: msg.account,
            state: msg.state
          }
        }).then((response) => {
          this.$message('已更改')
        }).catch(() => {
          this.loading = false
        })
      },
      query (msg) {
        this.acc = msg.acc
        this.name = msg.name
        this.get()
      },
      get () {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/manager/getAll`,
          responseType: 'json',
          params: {
            page: this.page,
            pagesize: this.pagesize,
            acc: this.acc,
            name: this.name
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.loading = false
            this.total = response.data.total
            this.list = response.data.data
          } else {
            this.list = []
            this.loading = false
            this.$alert('没有相关内容', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      },
      shows (msg) {
        this.addForms = true
      },
      showss (msg) {
        this.addForms = false
      },
      resetword (msg) {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/manager/reset`,
          responseType: 'json',
          params: {
            page: this.page,
            pagesize: this.pagesize,
            id: msg.id
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.total = response.data.total
            this.list = response.data.data
            this.$alert('已重置密码', '提示', {
              confirmButtonText: '确定'
            })
          } else {
            this.loading = false
            this.$alert('重置错误,请稍后重试', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
</script>
<style scoped>
  .div {
    /*margin-top: 10px;*/
  }

  .div1 {
    width: 100%;
    height: 50px;
    padding-top: 10px;
  }
</style>
